<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>教室界面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../static/css/font.css">
    <link rel="stylesheet" href="../../static/css/weadmin.css">
    <script src="../../lib/layui/layui.js" charset="utf-8"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        dialog{
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background: rgba(0,0,0,.3);
        }
        dialog p{
            font-size: 16px;
        }
        dialog section{
            width: 400px;
            background: #fff;
            margin: 200px auto 0;
            padding: 30px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex-direction: column;
        }
        dialog textarea{
            margin-top: 20px;
            padding-left: 5px;
            width: 80%;
        }
        dialog div{
            margin: 20px auto 0;
            display: flex;
            width: 100%;
            align-items: center;
            justify-content: space-around;
            flex-direction: row;
        }
        dialog div button{
            width: 100px;
            /*height: 30px;*/
            /*font-size: 14px;*/
            /*text-align: center;*/
            /*line-height: 30px;*/
        }
    </style>
</head>

<body>
<div class="weadmin-nav">
			<span class="layui-breadcrumb">
        <a href="">首页</a>
        <a><cite>预约教室</cite></a>
      </span>
    <a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="weadmin-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 we-search">
            <div class="layui-inline">
                <input class="layui-input" placeholder="预约日期" name="start" id="start">
            </div>
            <div class="layui-input-inline">
                <select name="contrller">
                    <option>教室状态</option>
                    <option>空教室</option>
                    <option>已预约</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="contrller">
                    <option>预约时间段</option>
                    <option>8：00-10:00</option>
                    <option>10:00-12:30</option>
                    <option>13:30-16:00</option>
                    <option>16:00-18:00</option>
                    <option>18:30-21:00</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="contrller">
                    <option value="">教室容量</option>
                    <option value="0">40</option>
                    <option value="1">80</option>
                    <option value="2">120</option>
                    <option value="3"><120</option>
                </select>
            </div>
            <button class="layui-btn" onclick="search(event)" type="button"><i class="layui-icon">&#xe615;</i></button>
        </form>
    </div>
    <div class="weadmin-block">
        <span class="fr totalNum" style="line-height:40px">共有数据：88 条</span>
    </div>
    <table class="layui-table">
        <thead>
        <tr>
            <!--<th>-->
            <!--<div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i class="layui-icon">&#xe605;</i></div>-->
            <!--</th>-->
            <th>教室编号</th>
            <th>教室位置</th>
            <th>预约日期</th>
            <th>教室容量</th>
            <th>教室状态</th>
            <th>是否预约</th>
        </tr>
        </thead>
        <tbody class="dataBody">
        <!--&lt;!&ndash;这里自动生成&ndash;&gt;-->
        <!--<tr data-id="1">-->
        <!--<td>-->
        <!--<div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id="1"><i class="layui-icon">&#xe605;</i></div>-->
        <!--</td>-->
        <!--<td>7-110</td>-->
        <!--<td>2018-12-08</td>-->
        <!--<td>10:00-12:30</td>-->
        <!--<td>40</td>-->
        <!--<td>空闲</td>-->
        <!--<td class="td-manage">-->
        <!--<button class="layui-btn layui-btn-normal layui-btn-xs" onclick="showDialog()">预约</button>-->
        <!--</td>-->
        <!--</tr>-->
        </tbody>
    </table>
    <div class="page">
        <div>
            <a class="prev" href="">&lt;&lt;</a>
            <span class="current">1</span>
            <a class="num" href="">2</a>
            <a class="num" href="">3</a>
            <!--<a class="num" href="">489</a>-->
            <a class="next" href="">&gt;&gt;</a>
        </div>
    </div>
    <!--输入预约理由的框-->
    <dialog style="display: none;">
        <section>
            <p>填写预约理由</p>
            <textarea rows="6" cols="20" placeholder="请输入预约理由"></textarea>
            <div>
                <button class="layui-btn layui-btn-normal" onclick="con()">确定</button>
                <button class="layui-btn layui-btn-primary" onclick="showDialog()">取消</button>
            </div>
        </section>
    </dialog>
</div>
<script>
    layui.extend({
        admin: '{/}../../static/js/admin'
    });
    layui.use(['laydate','jquery','admin'], function() {
        var laydate = layui.laydate,
            $ = layui.jquery,
            admin = layui.admin;
        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });
    });
    let common;
    let userId = '12345678';
    let nowClass;
    // function rm() {
    //     // dd = dd.slice(0,dd.length - 1);
    //     console.log(dd)
    //     buildList(dd)
    // }
    function getValue() {
        common = {
            date: document.getElementById('start').value,
            state: document.getElementsByName('contrller')[0].value,
            time: document.getElementsByName('contrller')[1].value,
            volue: document.getElementsByName('contrller')[2].value,
        }
    };
    let dd = [         //返回可用的教室列表
        {
            classroomId: '教室编号1',
            date: '预约日期1',
            time: '预约时间段',
            value: '教室容量',
            state: '教室状态(可用)'
        },
        {
            classroomId: '教室编号2',
            date: '预约日期2',
            time: '预约时间段',
            value: '教室容量',
            state: '教室状态（可用）'
        },
        {
            classroomId: '教室编号3',
            date: '预约日期2',
            time: '预约时间段',
            value: '教室容量',
            state: '教室状态（可用）'
        }
    ]
    const BASE_API_URL = 'https://';  //请求接口基础域名或者ip
    // let date = document.getElementById('start').value;
    // console.log(document.getElementById('date'.value));
    // window.onload = function () {
    //     console.log(document.getElementsByName('contrller')[0]);
    // }
    function search(e) {
        // console.log(document.getElementById('start').value);
        // console.log(document.getElementsByName('contrller')[0].value);
        // console.log(document.getElementsByName('contrller')[1].value);
        // console.log(document.getElementsByName('contrller')[2].value);
        getValue();
        let date = common.date;
        let state = common.state;
        let time = common.time;
        let value = common.value;
        //查询可用教室（接口地址还未填写）
        fetch('/classrooms_list.action'+'?date='+date+'&state='+state+'&time='+time+'&value='+value, {
            headers: {
                'Content-Type': 'json/application',
            },
            method: 'GET',
        }).then(res => {
            if(res.ok) {
                res.json().then(data => {
                    if(data.data.length > 0) {   //可用教室不为空
                        document.querySelector('.totalNum').innerHTML = ''+data.data.length+'条';    //共有数据几条
                        //根据返回结果自动生成可用教室列表
                        buildList(data.data);
                    }
                })
            }
        })
    }

    function buildList(data,stop) {
        let father = document.getElementsByClassName('dataBody')[0];
        if(father.getElementsByTagName('tr').length > 0) {
            for(let i = father.getElementsByTagName('tr').length-1; i >= 0; i--) {
                father.removeChild(father.getElementsByTagName('tr')[i])
            }
        }
        if(stop) return
        data.forEach(item => {  //对传入的数组每一个元素进行操作
            let tr = document.createElement('tr');
            let td = document.createElement('td');
            for(let i = 0; i < 6; i++) {
                tr.appendChild(document.createElement('td'));   //生成一行列表
            };
            let btn = document.createElement('button');
            let tds = tr.getElementsByTagName('td');
            tds[0].textContent = item.classroom_id;
            tds[1].textContent = item.building+"教"+item.room;
            tds[2].textContent = '2018-12-29';
            tds[3].textContent = item.classroom_capacity;
            tds[4].textContent = '空闲';
            tds[5].className = 'td-manage';
            btn.className = 'layui-btn layui-btn-normal layui-btn-xs';
            btn.addEventListener('click', showDialog);
            btn.innerHTML = '预约';
            tds[5].appendChild(btn);
            father.appendChild(tr);
        })
    };
    function showDialog(e) {         //弹出或者隐藏输入预约理由的框
        let dialog = document.getElementsByTagName('dialog')[0];
        if(dialog.style.display == 'block') {
            dialog.style.display = 'none';
            document.getElementsByTagName('dialog')[0].getElementsByTagName('textarea')[0].value = '';
            return;
        }
        dialog.style.display = 'block';
        nowClass = e.target.parentNode.parentNode.getElementsByTagName('td')[0].innerHTML;
    }
    function con() {
        let text = document.getElementsByTagName('dialog')[0].getElementsByTagName('textarea')[0];
        if(text.value.trim() == '') {
            text.value = '';
            alert('请填写预约理由')
            return;
        }
        var mymessage = confirm("是否确认预约？");
        console.log('预约教室编号',nowClass)
        console.log('预约理由',text.value)
        getValue()
        alert("预约成功");
        if (mymessage == true) {
            fetch('/classrooms.action', {   //提交预约信息接口
                headers: {
                    'Content-Type': 'json/application'
                },
                method: 'POST',
                body: {
                    'userId': userId,
                    'classroomId': nowClass,
                    'reason': text.value,
                    'date': common.date,
                    'time': '1'
                }
            }).then(res => {
                if(res.ok) {
                    res.json().then(data => {
                        // alert(data.data);
                    })
                }
            }).catch(e => {
                console.log(e)
            }).finally(() => {
                text.value = '';
            });
            document.getElementsByTagName('dialog')[0].style.display = 'none';
        } else {
            return false;
        }
    }
    search()
</script>

</body>

</html>